<template>
  <!-- <div style="margin-top:100px;">
    <button @click="shareToQQ()">分享到QQ</button>
    <button @click="shareToRoom()">分享到QQ空间</button>
    <button @click="shareToMicroblog()">分享到微博</button>
  </div> -->
  <div class="body">
    <div class="banner">
      <img
        src="../../assets/img/share/x.png"
        class="imgone"
        alt=""
      >
      <img
        src="../../assets/img/share/yuan.png"
        class="imgtwo"
        alt=""
      >
      <span class="spanone">打开媛福达APP
        <span class="spantwo">购物方便优惠多</span>
      </span>
      <div
        class="btn"
        @click="Gone"
      >下载</div>
      <!-- @click="Gonext" -->
      <div
        id="wekupButton"
        class="btn"
      >打开</div>
    </div>
    <!-- 测试视频播放 -->
    <video
      id="myVideo"
      class="video-js"
      preload="auto"
      controls="controls"
      poster="../../assets/img/hong/four/header.png"
    >
      <!-- src="../../assets/img/hong/gan.mp4" -->
    </video>
    <!-- tab组件 -->
    <Tab></Tab>
    <!-- 微信遮罩 -->
    <div
      @touchmove.prevent
      class="rigth"
      v-if="showe"
    >
      <img
        src="../../assets/img/wei_20210307160153.png"
        alt=""
      >
    </div>
    <!-- 测试动画效果 -->
    <div>
      <button v-on:click="Show">点击动画</button>
      <transition-group name="test">
        <div
          v-if="show"
          :key="1"
        >
          <img
            src="../../assets/img/sale/time.png"
            alt=""
          >
        </div>
      </transition-group>
    </div>
    <!-- 加密 -->
    <!-- <ul class="ul-scoll">
      <li
        v-for="(item, index) in sixPrize"
        :key="index"
      >
        恭喜 {{ item | capitalize}}
      </li>
    </ul> -->
  </div>
</template>
<script>
import Tab from '../../September-Components/Dome/dome1.vue'
import bridge from '../../js/js1'
import { getSystem, openApp, getUrlQuery, parseKeyValue } from '../../js/js'
export default {
  components: {
    Tab
  },
  data () {
    return {
      show: false,
      showe: false,
      system: getSystem(),
      sixPrize: [
        "18533337019",
        "13069467785",
        "13235677668",
        "13400308225",
        "13453380619",
        "13400184390",
        "13502043861",
        "13453384568",
        "17561512712",
        "13503314027",
        "13474750833",
        "13401424120",
        "13473279418",
        "13470422388",
        "13403233355",
        "13403287186",
        "13483956430",
        "13467101702",
        "15135865544",
        "13455183630",
        "13467123141",
        "13569620009",
        "13463437487",
        "13478208867",
        "13582133786",
        "13503460974",
        "13513402924",
        "13514178275",
        "13015465418",
        "13403595946",
        "13582219586",
        "13513054052",
        "13519234222",
        "13154792676",
        "13503531534",
        "18331098846",
        "13610660017",
        "13472949525",
        "13519011901",
        "13582283319",
        "13663311136",
        "13573065859",
        "13582164461",
        "13461915591",
        "13666889323",
        "13582878882",
        "13821672806",
        "13583661398",
        "13472220438",
        "13483784164",
        "13684583968",
        "13643587615",
        "13620678407",
        "13700575227",
        "18746135685",
        "13623263918",
        "13643589511",
        "13463838504",
        "13623372433",
        "13703286839",
        "13653562282",
        "13663826071",
        "13473079565",
        "13722280906",
        "13730497681",
        "13610637245",
        "13716984426",
        "13653589844",
        "13722808691",
        "13503545078",
        "13884800183",
        "18348655825",
        "13598147230",
        "15033994674",
        "15932078282",
        "18240731104",
        "13582050601",
        "18732464387",
        "13733386030",
        "13564277963",
        "15188665294",
        "13847459330",
        "15132874407",
        "13835850099",
        "13582042456",
        "15142931191",
        "13383628215",
        "15076016815",
        "13994096129",
        "15075166219",
        "17631769392",
        "18730503271",
        "15176245190",
        "13603229681",
        "15033684312",
        "18713406962",
        "19912332107",
        "18751510474",
        "13673123610",
        "13331543235",
        "13931271154",
        "13931288874",
        "13323246955",
        "13483254852",
        "13231558280",
        "15935654017",
        "17696610494",
        "13994913047",
        "15834360012",
        "18713723363",
        "18713619791",
        "18633611003",
        "18625308535",
        "15130344619",
        "18747614404",
        "15130719825",
        "18335017411",
        "13394151112",
        "13775430505",
        "15512845656",
        "13233553066",
        "13231947818",
        "15061303991",
        "18713159543",
        "13751431900",
        "13833125456",
        "15034333705",
        "15613755345",
        "18931754541",
        "18451175950",
      ],
    }
  },
  filters: {
    // 手机号加密
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.replace(/(\d{3})\d*(\d{2})/, "$1******$2")
    }
  },
  created () {
    this.showed()
    if (!this.system.yfd && !this.system.wechat) {
      if (this.system.iOS9 || this.system.android) {
        ULink([{
          id: 'usr1anivh5aa8uq6', // 后台生成的裂变活动LinkID
          data: {
            path: 'webview',
            webUrl: 'https://download.yuanfuda933.com/h5/other2.html#/skine',// 活动地址
            andUrl: 'https://download.yuanfuda933.com/h5/other2.html#/skine'// 活动地址
            // extraData: `{id:${this.id},uid:${this.uid}`,
            // extraData: {
            //   id: this.id,
            //   uid: this.uid,
            //   tid: this.tid
            // }
          }, /* 自定义参数，选填 */
          selector: '#wekupButton',
          useOpenInBrowerTips: 'default',
          proxyOpenDownload: function (defaultAction, LinkInstance) {
            window.location.href = LinkInstance.solution.downloadUrl
          }
        }])
      }
    }
  },
  mounted () {
  },
  methods: {
    showed () {
      if (this.system.wechat) {
        this.showe = true
        return false
      } else {
        this.showe = false
      }
    },
    Gone () {
      if (this.system.iOS) {
        this.href('https://itunes.apple.com/cn/app/id1542709823?mt=8')
      } else if (this.system.android) {
        window.location.href = 'https://yuanfuda933.oss-cn-zhangjiakou.aliyuncs.com/yfdMall_1_v1.0.1.apk'
      }
    },
    Gonext () {
      if (this.system.iOS) {
        // window.location.href = 'https://itunes.apple.com/cn/app/id1542709823?mt=8'
        this.href('https://itunes.apple.com/cn/app/id1542709823?mt=8')
      } else if (this.system.android) {
        this.href('yfd://yfdmall:8080/splash')
        setTimeout(function () {
          window.location.href = 'https://yuanfuda933.oss-cn-zhangjiakou.aliyuncs.com/yfdMall_1_v1.0.1.apk'
        }, 3000)
      }
    },
    href (uri, blank = true) {
      const a = document.createElement('a')
      a.style.display = 'none'
      a.href = uri
      if (blank) a.setAttribute('target', '_blank')
      document.body.appendChild(a)
      a.click()
      setTimeout(t => {
        document.body.removeChild(a)
      }, 0)
    },
    Show () {
      this.show = !this.show;
    },
    //分享到QQ好友(PC端可用)
    shareToQQ () {
      //此处分享链接内无法携带图片
      const share = {
        title: "东金秀财",
        desc: "描述",
        share_url: "https://xiucai.neafex.com/#/"
      };
      location.replace(
        "https://connect.qq.com/widget/shareqq/index.html?url=" +
        encodeURIComponent(share.share_url) +
        "&title=" +
        share.title +
        "&desc=" +
        share.desc
      );
    },
    //分享到QQ空间(可用)
    shareToRoom () {
      //自定义内容
      const share = {
        title: "东金秀财",
        desc: "描述",
        image_url: ["https://xxx.jpeg"],
        share_url: "https://地址"
      };
      let image_urls = share.image_url.map(function (image) {
        return encodeURIComponent(image);
      });
      //跳转地址
      location.replace(
        "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
        encodeURIComponent(share.share_url) +
        "&title=" +
        share.title +
        "&pics=" +
        image_urls.join("|") +
        "&summary=" +
        share.desc
      );
    },
    //分享到微博(可用)
    shareToMicroblog () {
      //自定义内容
      const share = {
        title: "东金秀财",
        image_url: ["https://xxx.jpeg"],
        share_url: "https://地址"
      };
      //跳转地址
      location.replace(
        "https://service.weibo.com/share/share.php?url=" +
        encodeURIComponent(share.share_url) +
        "&title=" +
        share.title +
        "&pic=" +
        share.image_url +
        "&searchPic=true"
      );
    }
  }
};
</script>
 
<style scoped lang="less">
body {
  overflow: hidden;
  min-width: 320px;
  max-width: 750px;
  width: 10rem;
  // height: 91.28rem;
  background: #ffbcd9;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  .rigth {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 10rem;
    height: 30rem;
    background-color: #1e1e1e;
    opacity: 0.8;
  }
  .rigth img {
    width: 8rem;
    height: 4.4rem;
    float: right;
  }
  .test-enter,
  .test-leave-to {
    opacity: 0;
  }
  .test-enter-to,
  .test-leave {
    opacity: 1;
  }
  .test-enter-active,
  .test-leave-active {
    transition: all 2s;
  }
  .banner {
    position: fixed;
    top: 0%;
    width: 10rem;
    height: 2.28rem;
    background: #000000;
    display: flex;
    .imgone {
      display: block;
      margin: auto 0.293333rem;
      width: 0.586667rem;
      height: 0.586667rem;
    }
    .imgtwo {
      display: block;
      margin: auto 0.266667rem;
      width: 1.28rem;
      height: 1.28rem;
    }
    .spanone {
      margin: auto 0.266667rem;
      width: 3.2rem;
      height: 1.453333rem;
      font-size: 0.426667rem;
      color: #ffffff;
      .spantwo {
        font-size: 0.32rem;
        font-size: #9b9b9b;
        color: #9b9b9b;
      }
    }
    .btn {
      width: 1.633333rem;
      height: 0.906667rem;
      background: #ea0462;
      border-radius: 0.133333rem;
      font-size: 0.426667rem;
      color: #ffffff;
      text-align: center;
      line-height: 0.906667rem;
      margin: auto 0;
    }
  }
  .video-js {
    margin-top: 6rem;
    width: 10rem;
    height: 5.6rem;
    background-size: contain;
    // background: url("../../assets/img/hong/four/header.png") no-repeat;
  }
}
</style>